<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript">

        $(function(){
            $("#checkedAllBtn").click(function () {//全选
                  $(":checkbox").prop("checked",true);
            });
            $("#checkedNoBtn").click(function () {//全不选
                $(":checkbox").prop("checked",false);
            });
            $("#checkedRevBtn").click(function () {//反　选
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                });
             });
            $("#checkedAllBox").click(function () {//全选/全不选
                $(":checkbox[name='items']").prop("checked",this.checked);
            });
            $("#sendBtn").click(function () {//全不选
                $(":checkbox[name='items']:checked").each(
                    function () {
                    alert(this.value);
                    }
                );
            });
            $(":checkbox[name='items']").click(
                function () {
                    var i = $(":checkbox[name='items']").length;
                    var it = $(":checkbox[name='items']:checked").length;
                    $("#checkedAllBox").prop("checked",i==it);
                }
            );
        });

    </script>
</head>
<body>

<form method="post" action="">

    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>

</body>
</html>